<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <!--引用css文件-->
    <th:block th:include="commont/common_header::commonHeader('列表')"></th:block>
    <!--引用js文件-->
    <th:block th:include="commont/common_header::commonFooter"></th:block>
    <meta charset="UTF-8">
    <title>thymeleaf文件支持</title>
    <style type="text/css">
        .js-example-basic-single {
            width: 25%;
        }

    </style>
    <script th:inline="javascript">
        $(document).ready(function () {
            // select2使用
            $('.select').select2({placeholder: "请选择", width: 'resolve'});
            // 表格
            $("#table").bootstrapTable({ // 对应table标签的id
                url: "/findListJson", // 获取表格数据的url
                dataType: 'json',
                cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
                striped: true,  //表格显示条纹，默认为false
                pagination: true, // 在表格底部显示分页组件，默认false
                pageList: [5, 10, 20], // 设置页面可以显示的数据条数
                pageSize: 10, // 页面数据条数 pageNumber: 1,
                pageNumber: 1, // 首页页码
                queryParamsType: 'limit',
                locale: 'zh-CN', //中文支持
                toolbar: '#toolbar', // 工具按钮用哪个容器
                showColumns: true, //是否显示所有的列（选择显示的列）
                showRefresh: true, //刷新按钮
                showToggle: true,//是否显示详细视图和列表视图的切换按钮
                cardView: false,//是否显示详细视图
                clickToSelect: true,
                showExport: true,//是否显示导出
                exportDataType: "basic",//basic', 'all', 'selected'. 当前页、所有数据还是选中数据
                exportOptions: {
                    ignoreColumn: [0],            //忽略某一列的索引
                    fileName: '用户信息表',              //文件名称设置
                    worksheetName: 'Sheet1',          //表格工作区名称
                    tableName: '用户信息表',
                    excelstyles: ['background-color', 'color', 'font-size', 'font-weight']
                },
                detailView: false,//是否显示父子表
                sidePagination: 'server', // 设置为server服务器端分页 client客户端
                queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
                    return {
                        pageSize: params.limit, // 每页要显示的数据条数
                        offset: params.offset, // 每页显示数据的开始行号
                        sort: params.sort, // 要排序的字段
                        sortOrder: params.order, // 排序规则
                        name: $("#txt_search_name").val(),// 额外添加的参数 ,如查询条件
                    }
                },
                sortable: true,// 排序
                sortName: 'id', // 要排序的字段
                sortOrder: 'desc', // 排序规则
                columns: [
                    {
                        checkbox: true, // 显示一个勾选框
                        align: 'center', // 左右居中
                        valign: 'middle' // 上下居中
                    }, {
                        field: 'id', // 返回json数据中的name
                        title: 'id', // 表格表头显示文字
                        align: 'center', // 左右居中
                        valign: 'middle' // 上下居中
                    }, {
                        field: 'name',
                        title: '名称',
                        align: 'center',
                        valign: 'middle'
                    }, {
                        field: 'age',
                        title: '年龄',
                        align: 'center',
                        valign: 'middle'

                    }, {
                        field: 'password',
                        title: '密码',
                        align: 'center',
                        valign: 'middle'

                    }, {
                        field: 'id',
                        title: "操作",
                        align: 'center',
                        valign: 'middle',
                        width: 160, // 定义列的宽度，单位为像素px
                        formatter: actionFormatter
                    }
                ],
                silent: true, // 刷新事件必须设置
                onLoadSuccess: function () {  //加载成功时执行
                    console.info("加载成功");
                },
                onLoadError: function () {  //加载失败时执行
                    console.info("加载数据失败");
                },
                onDblClickRow: function (row, $element) {
                    var id = row.id;
                    EditViewById(id, 'view');
                }
            });

            //操作栏的格式化
            function actionFormatter(value, row, index) {
                //value 获取的是field的值，row 获取的是自身栏的所有值，index，获取的该栏的位置即下标
                var id = value;
                var result = "";
                result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
                result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
                result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
                return result;
            }


            // 查询
            $("#btn_query").click(function () {
                $("#txt_search_name2 option:selected").val();// 获取select的值
                $('#table').bootstrapTable('refresh');//刷新

            });

            function EditViewById(id, view) {
                alert(id + "---" + view);

            }
        })
    </script>
</head>
<body>

<div class="panel-body" style="padding-bottom:0px;">
    <div class="panel panel-default">
        <div class="panel-heading">查询条件</div>
        <div class="panel-body">
            <form id="formSearch" class="form-horizontal">
                <div class="form-group" style="margin-top:15px">

                    <label class="control-label col-sm-1" for="txt_search_name">名称</label>
                    <div class="col-sm-2">
                        <input type="text" class="form-control" id="txt_search_name">
                    </div>
                    <label class="control-label col-sm-1" for="txt_search_age">年龄</label>
                    <div class="col-sm-2">
                        <input type="text" class="form-control" id="txt_search_age">
                    </div>


                    <label class="control-label col-sm-1" for="txt_search_name2">状态</label>
                    <div class="col-sm-2">
                        <select class="select form-control" id="txt_search_name2">
                            <option value="">请选择</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                        </select>
                    </div>

                </div>
                <div class="form-group" style="margin-top:15px">
                    <label class="control-label col-sm-1" for="txt_search_date">时间</label>
                    <div class="col-sm-2">
                        <input class="Wdate form-control" id="txt_search_date" name="data" autocomplete="off"
                               onclick="WdatePicker({dateFmt:'yyyy年MM月dd日 HH时mm分ss秒'})">
                    </div>

                    <div class="col-sm-2" style="text-align:left;">
                        <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!--bootstrap-table-->
    <table id="table"></table>
</div>
</body>
</html>